<template>
   <div>
      <div v-for="item in articles" :key="item.id" class="articleOne flex" @click="ToArticleDetail(item.id)">

         <img :src="item.createdCover" class="backImage">
        
        <!-- 信息 -->
         <div class="infoBack">
           <div class="info flex">
             <div v-for="(info,index) in infoData" :key="index" class="flex">
                 <font-awesome-icon  :icon="info.icon" class="icon"/>
                 <div v-if="item[info.value]"> {{item[info.value] }}</div>
             </div>
           </div>
         </div>

         <!-- 详情 -->
         <div class="detail">
             <div class="title overflow">{{item.title}}</div>
             <div class="user flex">
                <!-- <img :src="item.headphoto" class="headphoto"> -->
                <div class="overflow name ">{{item.username}}</div>
                <div class="time">{{item.createdTime | time('simple_') }}</div>
             </div>
         </div>

      </div>
   </div>
</template>
<script>
  export default 
  {
     name :'', 
     props:['articles'],
     methods: {
          ToArticleDetail(id){
            this.$router.push({path:'/articleDetail', query: {id} })
         },
     },
     data() {
        return {
            infoData:[
                {icon:'heart',value:'likeCount'},
                {icon:'star',value:'collectCount'},
                {icon:'comment-dots',value:'discussCount'},
            ]
        }
     },

  }
</script>
<style scoped lang='less'>



@media screen and (min-width:1100px) and  (max-width: 1500px) {
    div.articleOne{
        width: calc(25% - 10px);  
    }
}
@media screen and (min-width:800px) and (max-width: 1100px) {
    div.articleOne{
        width: calc(33.3% - 10px);  
    }
}
@media screen and (max-width: 800px) {
    div.articleOne{
        width: calc(50% - 10px);  
    }
}

.articleOne{
    width: calc(20% - 10px);
    margin: 5px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;

    .backImage{
        width: 100%;
        height: 170px;
        border-radius: 0;
    }
}
.infoBack{
    width: 100%;
    height: 170px;
    position:absolute;
    top: 0;

    // 文章信息
    .info{
        flex-wrap: nowrap;
        width: 100%;
        height: 30px;
        position: absolute;
        bottom: 0;
        background: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);

        justify-content: space-between;
        padding: 0 10px;
        box-sizing: border-box;
        color: white;

        .icon{
            margin-right: 5px;
        }
    }
}


//文章详情
.detail{
    width: 100%;
   
    padding:   10px;
    margin: 0;
    box-sizing: border-box;
    background: white;

    .user{
        margin: 5px 0;
        justify-content: space-between;
        
        .name{
            color: rgba(0, 0, 0, 0.5);
        }
        .time{
            margin-left: 5px;
            font-size: 14px;
        }
    }
}

.title{
    width: 100%;
}
</style>